@import './theme/default.less';
@circle-width: 76px;
@circle-path-width: 3px;
@color-info: @theme-stroke-4;
@color-bg: @theme-stroke-9;
@color-success: @theme-success-2;
@color-exception: @theme-error-2;
@transition-duration: 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;

.zent-progress {
  &.zent-progress-line {
    .zent-progress-wrapper {
      display: inline-block;
      background: @color-bg;
    }

    .zent-progress-inner {
      transition: all @transition-duration;
    }

    .zent-progress-info {
      display: inline-block;
      min-width: 27px;
      min-height: 15px;
      margin-left: 10px;
      font-size: 12px;
      color: @color-info;
      white-space: nowrap;
    }

    .zent-progress-inprogress {
      .zent-progress-inner {
        background: @color-exception;
      }

      .zent-progress-info {
        color: @color-info;
      }
    }

    .zent-progress-success {
      .zent-progress-inner {
        background: @color-success;
      }

      .zent-progress-info {
        color: @color-success;
      }
    }

    .zent-progress-exception {
      .zent-progress-inner {
        background: @color-exception;
      }

      .zent-progress-info {
        color: @color-exception;
      }
    }
  }

  &.zent-progress-circle {
    position: relative;
    display: inline-block;

    .zent-progress-wrapper,
    .zent-progress-inner {
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .zent-progress-wrapper {
      border-style: solid;
      border-color: @color-bg;
      box-sizing: border-box;
    }

    .zent-progress-info {
      display: inline-block;
      font-size: 12px;
      color: @color-info;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
    }

    .zent-progress-inner-path {
      stroke-linecap: round;
      fill: none;
      transition: stroke-dashoffset @transition-duration;
      transform: rotate(-90deg);
      transform-origin: center center;
    }

    .zent-progress-inprogress {
      .zent-progress-inner-path {
        stroke: @color-exception;
      }

      .zent-progress-info {
        color: @color-info;
      }
    }

    .zent-progress-success {
      .zent-progress-inner-path {
        stroke: @color-success;
      }

      .zent-progress-info {
        color: @color-success;
      }
    }

    .zent-progress-exception {
      .zent-progress-inner-path {
        stroke: @color-exception;
      }

      .zent-progress-info {
        color: @color-exception;
      }
    }
  }
}
